<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上映影片</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="active  my-color item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
</div>
</div>
<div class="ui grid container">
    <div class="row second_brade">
        <div class="ten wide column">
            <a th:href="@{/}">首页</a> ><a th:href="@{/movieList}">影片</a>  > 杭州
        </div>
        <div class="six wide column">
            3步轻松购票:1.选座购票->买券2.收电子码->3.影院取票
        </div>
    </div>
</div>
<div class="ui grid container">
    <div class="ten wide column all_movie_div">
        <div class="ui  secondary pointing  segment menu second_menu">
            <div class='active item' id='now_btn'>正在热映</div>
            <div class='item' id='next_btn'>即将上映</div>
        </div>
        <div class="ui fitted divider"></div>
        <div class="ui grid container">
            <div class="row" id="now">

                <div class='five wide column movie_row_margin' th:each="nowFilm:${allNowFilms}">
                    <a th:href='@{/detail/{id}(id=${nowFilm.id})}'><div class='movie_image'>
                    <img width='164' height='244' th:src='@{${nowFilm.picture}}'>
                    <div class='mask'>
                        <div><span>导演：<font th:text="${nowFilm.director}"></font></span>
                            <span>主演：<font th:text="${nowFilm.actor}"></font></span>
                            <span>类型：<font th:text="${nowFilm.type}"></font></span>
                            <span>地区：<font th:text="${nowFilm.area}"></font></span>
                            <span>语言：<font th:text="${nowFilm.language}"></font></span>
                            <span>片长：<font th:text="${nowFilm.length}"></font>分钟</span>
                        </div>
                    </div>
                    <div class='movie_name' th:text="${nowFilm.name}">电影名称</div>
                    </div></a>
                <a th:href='@{/detail/{id}(id=${nowFilm.id})}'><div class='movie_nowBuy'>在线选票</div></a>
                </div>

            </div>
            <div class="hide row" id="next">

                <div class='five wide column movie_row_margin' th:each="nextFilm:${allNextFilms}">
                <a th:href='@{/detail/{id}(id=${nextFilm.id})}'><div class='movie_image'>
                    <img width='164' height='244' th:src='@{${nextFilm.picture}}'>
                    <div class='mask'>
                        <div><span>导演：<font th:text="${nextFilm.director}"></font></span>
                            <span>主演：<font th:text="${nextFilm.actor}"></font></span>
                            <span>类型：<font th:text="${nextFilm.type}"></font></span>
                            <span>地区：<font th:text="${nextFilm.area}"></font></span>
                            <span>语言：<font th:text="${nextFilm.language}"></font></span>
                            <span>片长：<font th:text="${nextFilm.length}"></font>分钟</span>
                        </div>
                    </div>
                    <div class='movie_name' th:text="${nextFilm.name}">电影名称</div>
                    </div></a>
                    <a th:href='@{/detail/{id}(id=${nextFilm.id})}'><div class='movie_next'>上映时间:<span th:text="${#dates.format(nextFilm.playTime,'yyyy-MM-dd')}"></span></div></a>
                </div>

            </div>
        </div>
    </div>
    <div class="six wide column remove_padding">
        <div class="ui basic secondary vertical segment segment_border add_padding">
            <div class="ui  secondary pointing  segment menu remove_padding">
                <div class="item font_size_medium">
                    热门电影院
                </div>
                <div class="right item">
                    <a th:href="@{/cinemaList}" style="color: red">查看全部影院 ></a>
                </div>
            </div>

            <div class='ui grid item' th:each="cinema:${cinemas}">
                <div class='twelve wide column'>
                    <div class='movie_cinema_name' th:text="${cinema.name}"></div>
                    <div class='movie_cinema_location' th:text="${cinema.address}"></div>
                 </div>
                <div class='four wide column movie_toCinema'>
                    <a th:href='@{/cinemaDeatil/{id}(id=${cinema.id})}'>选座购票</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#now_btn').click(function () {
        $('#now_btn').addClass('active')
        $('#next_btn').removeClass('active')
        $('#now').removeClass('hide')
        $('#next').addClass('hide')
    })
    $('#next_btn').click(function () {
        $('#next_btn').addClass('active')
        $('#now_btn').removeClass('active')
        $('#next').removeClass('hide')
        $('#now').addClass('hide')
    })
</script>
</body>
</html>